iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 2
0
Modern Web

前端工程的另一個選擇 Svelte 系列 第 14

DAY14- slot 複合式元件

  • 分享至 

  • xImage
  •  

svelte slot 的介紹

svelte slot 是在說明完html的事件以及變數綁定還有fetch和promise還有await之後要說明的,為什麼這個 slot 這麼重要,因為它可以讓元件開發更便利,廢話不多說先讓大家看看他的威力。

本文同步放置於此

內容介紹

相信讀者們常會有遇到,有很多html都很相同,但是又需要客製化一些部分,但是又不確定有哪些地方需要客製化,所以在開發上很不容易把共同的地方抽象出來。所以這時html就有slot這個標籤的出現,但是當然不時所有的瀏覽器都支援這功能,更別提舊版本的瀏覽器。那slot這功能的特點在哪裡呢?大家可以看看slot介紹,不過簡單講就是把html的原件下的子節點內嵌到元件內,這樣描述應該大家會聽得很模糊,所以大家看一下下列的例子,這時需要有兩個元件
如下所示。

svelte slot 的實作

首先是App.svelte的相關內容,主要是使用到後面的Box.svelte並在其下面有定義html的子節點。

<script>
	import Box from './Box.svelte';
</script>

<Box>
    <h2>Hello!</h2>
    <p>This is a box. It can contain anything.</p>
</Box>

接下來就是Box.svelte的相關內容,這邊定義了相關的css樣式,但是重點在於slot這個html標籤,因為在App.svelte裡面定義的Box子節點會直接放到slot這個html標籤的位置,所以說這個Box.svelte可以很簡單的覆用,只要將先關的html放在其子節點就可以了。

<style>
	.box {
		width: 300px;
		border: 1px solid #aaa;
		border-radius: 2px;
		box-shadow: 2px 2px 8px rgba(0,0,0,0.1);
		padding: 1em;
		margin: 0 0 1em 0;
	}
</style>

<div class="box">
    <slot></slot>
</div>

如何設定預設值

當然大家會想要直接使用Box.svelte這元件,所以這時候就會想說有沒有設定預設值的方式,這裡只要將上面的例子修改成下列內容即可。

<style>
	.box {
		width: 300px;
		border: 1px solid #aaa;
		border-radius: 2px;
		box-shadow: 2px 2px 8px rgba(0,0,0,0.1);
		padding: 1em;
		margin: 0 0 1em 0;
	}
</style>

<div class="box">
    <slot>
        <em>no content was provided</em>
    </slot>
</div>

這時只要使用Box.svelte時沒有子節點就會直接顯示預設的內容。

小結

在介紹完基本的svelte的html功能後要開始進入進階的內容了,今天跟大家介紹slot,但是今天的slot只是初步的介紹大家如何使用,待明日在更進一步介紹slot的進階內容。


上一篇
DAY13-fetch和promise還有await抓抓資料
下一篇
DAY15- named slots 命名插座
系列文
前端工程的另一個選擇 Svelte 30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言